<template>
    <div>
        <h2>会员显示页面</h2>
        <a href="/">新增会员</a>
        <input type="text" v-model="page.name"  placeholder="名称">
        <input type="text" v-model="page.sage"  placeholder="最小年龄">
        -
        <input type="text" v-model="page.eage" placeholder="最大年龄">
        <input type="date" v-model="page.sdate" >
        -
        <input type="date"  v-model="page.edate">
        <select v-model="page.levelid">
              <option value="0">请选择</option>
              <option v-for="a in xlk" :value="a.id">
                {{ a.levelTitle }}
              </option>
            </select>
        <select v-model="page.state">
            <option :value="null">请选择</option>
            <option :value="true">启用</option>
            <option :value="false">禁用</option>
        </select>
       <input type="button" value="查询" @click="chax">
       <input type="button" value="重置" @click="cz">
        <table class="table">
            <thead>
            <tr>
                <td><input type="checkbox" @change="selectid" v-model="selectiddata"></td>
                <td>会员编号</td>
                <td>会员名称</td>
                <td>密码</td>
                <td>性别</td> 
                <td>电话</td>
                <td>年龄</td>
                <td>新增日期</td>
                <td>状态</td>
                <td>会员等级</td>
                <td>头像</td> 
                <td>修改</td> 
            </tr>
            </thead> 
            <tbody> 
                <tr v-for="e in data">
                 <tb><input type="checkbox" :value="e.id" v-model="idlist"></tb>
                <td>{{ e.id}}</td>
                <td>{{ e.name }}</td>
                <td>{{ e.password }}</td>
                <td>{{ e.sex==1?"男":"女" }}</td> 
                <td>{{ e.phoneNumber }}</td>
                <td>{{ e.age }}</td>
                <td>{{ moment(e.createDate).format('YYYY-MM-DD') }}</td>
                <td>{{ e.state?"启用":"禁用" }}</td>
                <td>{{ e.levelTitle }}</td>
                <td><img :src="'https://localhost:7192/'+e.img" style="height: 100px;width: 100px;"></td>
                <td>
                    <input type="button" value="修改" @click="update(e.id)">
                </td> 
            </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="getpage(1)">
        <input type="button" value="上一页" @click="getpage(2)">
          
        <input v-for="d in pageinfo.listcount" type="button" :value="d" @click="btnindex(d)">

        <input type="button" value="下一页" @click="getpage(3)">
        <input type="button" value="尾页" @click="getpage(4)">
        一共{{pageinfo.count}}条,每页显示{{page.pageSize}}条,一共{{pageinfo.listcount}}页,当前第{{page.pageIndex}}页
        <input type="text" v-model="page.pageIndex"><input type="button" value="跳转" @click="tz">
        <select v-model="page.pageSize" @click="select">
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>
        <br>
        <input type="button" value="批量逻辑删除" @click="selectidinfo">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios';
import moment from 'moment';
import { useRouter } from 'vue-router';
const router=useRouter();

onMounted(()=>{ 
    xlkk();
    show(); 
})

//跳转修改页
const update=(val:any)=>{
    router.push({path:'/up',query:{id:val}});
}


//下拉框动态绑定
const xlk = ref([
  {
    id: 0,
    levelTitle: "",
    state: true,
  },
]);
const xlkk = () => {
  axios.get("https://localhost:7192/api/XLK").then((res) => {
    xlk.value = res.data;
  });
}; 
//保存全选 全选取消的选中状态
const selectiddata=ref(false)
//保存数据行选中的复选框value
//为了保存多个值 必须加方括号表示数组
const idlist=ref([])
//全选 全取消
const selectid=()=>{
    if(selectiddata.value){
        data.value.forEach(e=>{
            idlist.value.push(e.id)
        })
    }
    else{
        //都不选
        idlist.value=[];
    }
}
//逻辑删除
const selectidinfo=()=>{
    axios.get("https://localhost:7192/api/Mem/LuoDelete",{params:{idstring:idlist.value.toString()}}).then(res=>{
        if(res.data>0)
    {
        alert("逻辑删除成功")
        selectiddata.value=false;
        show();
    }
    else{
        alert("逻辑删除失败")
    }
    })
} 
//跳转
const tz=()=>{
    show();
}
//页容量
const select=()=>{
    show();
}
//查询
const chax=()=>{
    page.value.pageIndex=1;
    show()
}
//跳转页
const btnindex=(val:any)=>{
 page.value.pageIndex=val;
 show();
}
//重置
const cz=()=>{
     (page.value.name=""),
     (page.value.sage=0),
     (page.value.eage=0),
     (page.value.sdate=""),
     (page.value.edate=""),
     (page.value.levelid=0),
     (page.value.state=null)
}
//翻页
const getpage=(val:any)=>{
     if(val==1)
     {
        page.value.pageIndex=1;
        show()
     }
     if(val==2)
     {
        if(page.value.pageIndex>1)
     {
        page.value.pageIndex-=1;
        show()
     }
     }
     if(val==3)
     {
       if(page.value.pageIndex<pageinfo.value.listcount)
       {
        page.value.pageIndex+=1;
        show()
       }
     }
     if(val==4)
     {
        page.value.pageIndex=pageinfo.value.listcount;
        show()
     }
}
//显示model
const data=ref([
    {
      "id": 7,
      "name": "admin2",
      "password": "123",
      "phoneNumber": "12312312312",
      "sex": 2,
      "birthday": "2025-04-10T00:00:00",
      "age": 22,
      "isDelete": true,
      "createDate": "2025-04-10T00:00:00",
      "state": true,
      "memberLevelId": 0,
      "img": "/img/c4d87bd1-48bb-481f-a363-093c7bd59173tom.jpg",
      "levelTitle": "青铜会员"
    }
  ])
//多条件查询 分页
const page=ref({
    pageIndex:1,
    pageSize:3,
    name:"",
    sage:0,
    eage:0,
    sdate:"",
    edate:"",
    state:null,
    levelid:0
})
//总页数 总条数
const pageinfo =ref({
    count:0,
    listcount:0
})

const show=()=>{
   axios.get("https://localhost:7192/api/Mem/ShowMem",{params:page.value}).then(res=>{
    data.value=res.data.list
    
    pageinfo.value.count=res.data.count;
    pageinfo.value.listcount=Math.ceil(pageinfo.value.count/page.value.pageSize);

   })
}

</script>

<style scoped>

</style>